<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数组操作</title>
    <script>
        let arr = [
            {id: 1, name: '张三', age: 20},
            {id: 2, name: '李四', age: 19},
            {id: 3, name: '王五', age: 21}
        ]

        // 往后追加
        arr.push({id: 4, name: '赵六', age: 18})
        console.log(...arr) // 扩展运算符

        // 往前添加
        arr.unshift({id: 0, name: '未知', age: 18})
        console.log(...arr)

        // 在索引为2的位置上，增加一个对象
        arr.splice(2, 0, {id: 100, name: 'xxx', age: 50})
        console.log(...arr)

        // 删除索引为2的元素
        arr.splice(2, 1)
        // 删除第一个元素
        arr.shift()
        // 删除最后一个元素
        arr.pop()
        console.log(...arr)

        // 修改第二个元素的年龄为29
        // arr[1] = {id: 2, name: '李四', age: 29}
        arr[1].age = 29
        console.log(...arr)

        // 循环遍历数组，foreach
        // 回调函数的形参
        // 第一个表示数组中的某一个元素
        // 第二个表示数组元素的索引
        arr.forEach((item, index) => {
            console.log(index)
        })
        arr.forEach(item => console.log(item))

        // 根据条件查找
        // 获取年龄比25岁大的人名
        function findUser() {
            for(let i = 0; i < arr.length; i++) {
                if(arr[i].age > 25) {
                    return arr[i]
                }
            }
        }
        // console.log(findUser())
        // 根据回调函数的条件去查找元素，一旦达成条件则返回符合条件的第一个元素
        // 都不符合条件，则返回undefined
        console.log(arr.find(item => item.age > 25))
        
    </script>
</head>
<body>
    
</body>
</html>